<template>
  <div class="g-main">
    <div class="g-header">
      <strong>筛选查询</strong>
      <el-row gutter="30" style="margin-top: 10px;">
        <el-col :xs="24" :sm="24" :md="7" :lg="6" class="list-sch">
          <span>关键字搜索</span>
          <el-input placeholder="请输入关键字" style="max-width: 200px;" v-model="schKey"></el-input>
        </el-col>

        <el-col :xs="24" :sm="24" :md="7" :lg="6" class="list-sch">
          <span>商品分类</span>
          <el-select v-model="schType" placeholder="请选择" clearable style="max-width: 200px;">
            <el-option v-for="item in listClassification" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :xs="24" :sm="24" :md="7" :lg="6" class="list-sch">
          <span>商品状态</span>
          <el-select v-model="schStatus" placeholder="请选择" clearable style="max-width: 200px;">
            <el-option v-for="item in listState" :key="item.value" :label="item.label" :value="item.value"
              style="display: flex;justify-content: space-between;align-items: center;">
              <span>{{item.label}}</span>
              <svg-icon :icon-class="item.iconClass" class-name="header-card-icon icon-on" :class-name="item.iconColor">
              </svg-icon>
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="24" :md="3" :lg="6">
          <el-button @click="query" round type="primary" style="width: 100px;margin-bottom: 10px;">查询</el-button>
        </el-col>
      </el-row>

    </div>

    <div class="m-main">
      <strong>数据列表</strong>
      <el-row class="listMain listTitle">
        <el-col class="titleLi" :xs="5" :sm="5" :md="5" :lg="5">商品图片</el-col>
        <el-col class="titleLi" :xs="5" :sm="5" :md="5" :lg="5">商品名称</el-col>
        <el-col class="titleLi" :xs="5" :sm="5" :md="5" :lg="5">商品种类</el-col>
        <el-col class="titleLi" :xs="5" :sm="5" :md="5" :lg="5">商品状态</el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4"></el-col>
      </el-row>

      <el-row class="listMain listMain-li" v-for="item in getCurrentLi()">
        <el-col class="titleLi" :xs="6" :sm="5" :md="5" :lg="5">
          <img :src="item.img" style="width:120px;">
        </el-col>
        <el-col class="titleLi" :xs="5" :sm="5" :md="5" :lg="5">{{item.name}}</el-col>
        <el-col class="titleLi" :xs="5" :sm="5" :md="5" :lg="5">{{item.type}}</el-col>
        <el-col class="titleLi" :xs="4" :sm="5" :md="5" :lg="5">{{item.status}}</el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4">
          <el-button round @click="toLink(item)">查看</el-button>
        </el-col>
      </el-row>

      <div class="list-page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
          layout="total,sizes,prev, pager, next" :total="listData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        listClassification: [{
          value: "跑步鞋",
          label: "跑步鞋"
        }, {
          value: "休闲鞋",
          label: "休闲鞋"
        }, {
          value: "篮球鞋",
          label: "篮球鞋"
        }],

        listState: [{
            value: "已上架",
            label: "已上架",
            iconClass: "commodityOn",
            iconColor: "icon-on"
          },
          {
            value: "未上架",
            label: "未上架",
            iconClass: 'commodityNot',
            iconColor: 'icon-not'
          },
          {
            value: "已下架",
            label: "已下架",
            iconClass: 'commodityOff',
            iconColor: 'icon-off'
          }
        ],

        listData: [{
          img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
          name: '绝影CRC 紫色',
          type: '跑步鞋',
          state: '已上架'
        }, {
          img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
          name: '绝影CRC 紫色',
          type: '跑步鞋',
          state: '已上架'
        }, {
          img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
          name: '绝影CRC 紫色',
          type: '跑步鞋',
          state: '已上架'
        }, {
          img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
          name: '绝影CRC 紫色',
          type: '跑步鞋',
          state: '已上架'
        }, {
          img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
          name: '绝影CRC 紫色',
          type: '跑步鞋',
          state: '已上架'
        }],

        currentPage:1,
        pageSize:5,

        schKey:'',
        schType:'',
        schStatus:''
      }
    },
    methods:{
      handleSizeChange(val){
        this.pageSize=val;
      },
      handleCurrentChange(val){
        this.currentPage=val;
      },
      getCurrentLi(){
        var st=(this.currentPage-1)*this.pageSize;
        var ed=st+this.pageSize;
        var ans= this.listData.slice(st,ed);
        return ans;
      },
      toLink(item){
        this.$router.push({path: '/desc',query:{ shoes_id:item.shoes_id}});
      },
      query(){
        const data={
          name:this.$data.schKey,
          type:this.$data.schType,
          status:this.$data.schStatus
        }
        axios.post('/mert/shoes/getkey',data,{
          headers:{
            'Content-Type': 'application/json'
          }
        }).then(res=>{
          console.log(res);
          this.$data.listData=res.data;
        })
        .catch(error=>{
          console.log(error);
        })
      }
    },
    created(){
      console.log("debug");
      const data={
        status:"all"
      }
      console.log(data)
      axios.post('/mert/shoes/getAll',data,{
        headers:{
          'Content-Type': 'application/json'
        }
      }).then(res=>{
        console.log(res);
        this.$data.listData=res.data;
      })
      .catch(error=>{
        console.log(error);
      })
    }

  }
</script>

<style lang="scss" scoped>
  $iconOnColor:#12c974;
  $iconOffColor:#979797;
  $iconNotColor:#ff8b47;

  .icon-on {
    color: $iconOnColor;
  }

  .icon-off {
    color: $iconOffColor;
  }

  .icon-not {
    color: $iconNotColor;
  }

  .g-main {
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    min-height: 762px;

    strong {
      font-size: 18px;
    }


    .g-header {
      width: 100%;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;

      .list-sch {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        span {
          min-width: 80px;
          margin-right: 10px;
        }
      }
    }

    .m-main {
      width: 100%;
      display: flex;
      flex-direction: column;

      .listMain {
        display: flex;
        align-items: center;

        .titleLi {
          text-align: center;
        }
      }

      .listMain-li {
        border-bottom: 2px solid #eaeaea;
        padding:10px 0;
        //background-color: #ecf1f5;

        // &:hover{
        //   background-color: #ecf1f5;
        //   cursor: pointer;
        //   border-radius: 10px;
        // }
      }

      .listTitle {
        background-color: #e9eef5;
        padding: 10px 0;
        margin-top: 20px;
        border-radius: 20px;
        font-weight: 600;
      }

      .list-page{
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>
